<!-- 车系商品列表页 -->
<template>
  <view class=" c_box" :class="[device.lang]">
    <view class="box">
      <shopCartHead :carMakeId="carMakeId" :carMake="carMake" :bgColor="device.MyShop.shopBackgroundColor"
        @shopSearch="shopSearch" @ConfrmBallback="ConfrmBallback" />
      <view class="content">
        <ShopItem ref="CartContent" :cartListData="cartList" @computedPriceBack="computPrice" />
        <!-- <shopCartContent ref="CartContent" :cartListData="cartList" @computedPriceBack="computPrice" /> -->
      </view>
      <shopCartFooter :footerData="footer" @Checkout="Checkout" />
      <view class="">
        <shopCartSearch ref="shopSearchRef" @Confrm="SearchConfrm" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue"
import shopCartHead from "./components/shopCartHead.vue"
// import shopCartContent from "@/components/shopCartView/shopCartContent.vue"
import shopCartFooter from "@/components/shopCartView/shopCartFooter.vue"
import shopCartSearch from "@/components/shopCartView/shopCartSearch.vue"
import { useDeviceStore } from "@/store"
import { CartAPI } from "@/api/index";
import { onLoad, onHide } from "@dcloudio/uni-app";
import { storeToRefs } from 'pinia'
import ShopItem from './components/shop-item.vue'
import { useCategoryStore } from '@/store'
const categoryStore = useCategoryStore()
const { selectedSecondCategory, selectedThirdCategory, selectedTab } = storeToRefs(categoryStore)
const device = useDeviceStore()
const isSearch = ref(false)
const shopSearchRef = ref()
const carMakeId = ref("")
const carMake = ref('')
const cartList = ref([])
const footer = ref({
  totalProductPrice: 0,
  totalQuantity: 0
})
const CartContent = ref()
const ConfrmBallback = (data) => {
  console.log(data)
  queryMyCart(data)
}
onLoad((e) => {

  if (e.carMakeId) {
    carMakeId.value = e.carMakeId
  }
  if (e.carMake) {
    carMake.value = e.carMake
  }
})
const Checkout = () => {
  CartContent.value.Checkout()
}
const queryMyCart = async (data) => {
  let res = await CartAPI.getmyCartList({
    "carMake": carMakeId.value,
    "categorySecondId": data?.categorySecondId,
    "categoryThirdId": data?.categoryThirdId,
    "productLabelId": data?.productLabelId,
    type: "special",
    id: device.MyShop.id
  })
  if (!res.productCartList) {
    return
  }
  cartList.value.push(...res.productCartList)
  footer.value.totalProductPrice = res.totalProductPrice
  footer.value.totalQuantity = res.totalQuantity
}
const computPrice = (data) => {
  footer.value.totalProductPrice = data.totalProductPrice
  footer.value.totalQuantity = data.totalQuantity
}
onMounted(() => {
  queryMyCart()
  getList()
  // cartList.value.forEach(item => {

  // })

})
const getList = () => {
  const params = {
    shopId: device.MyShop.id,
    productLabelId: selectedTab.value?.id ?? undefined,
    categorySecondId: selectedSecondCategory.value?.id ?? undefined,
    categoryThirdId: selectedThirdCategory.value?.id ?? undefined
  }
  CartAPI.getProductList(params).then(res => {
    if (res?.items) {
      cartList.value = res.items
    }
  })
}
const SearchConfrm = () => {

}
const shopSearch = () => {
  shopSearchRef.value.isShow = true
}
onHide(() => {
  categoryStore.clearSelectedSecondCategory()
  categoryStore.clearSelectedThirdCategory()
  categoryStore.clearSelectedTab()
})
</script>

<style lang="scss" scoped>
@import "@/static/css/index.scss";

page {
  background: $primary-bg;
}

.box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content {
  flex: 1;
  overflow-y: scroll;
  padding: 0 15rpx;
}
</style>